<template>

  <el-row class="widget-col widget-view"
          :key="node.key"
          :gutter="node.options.gutter ? node.options.gutter : 0"
          :justify="node.options.justify"
          :align="node.options.align"
          @click.stop="handleSelectWidget()">
    <el-col v-for="(col, colIndex) in node.columns"
            :key="colIndex"
            :span="col.span ? col.span : 0">

      <draggable :list="col.list"
                 group="people"
                 :component-data="{ name: 'flip-list', type: 'transition' }"
                 tag="div"
                 :key ="col.key"
                 :item-key="col.key"
                 @add="handleWidgetColAdd($event, col, colIndex)">
        <template #item="{element,index}">

          <widget-form-item :element="element"
                            :data="element"
                            :key="element.id"
                            v-model:select="selectWidget"
                            :index="index"></widget-form-item>
        </template>
      </draggable>
    </el-col>
    <div class="widget-view-action widget-col-action"
         v-if="selectWidget.key == node.key">

      <i class="iconfont icon-trash"></i>
    </div>

    <div class="widget-view-drag widget-col-drag"
         v-if="selectWidget.key == node.key">
      <i class="iconfont icon-drag drag-widget"></i>
    </div>
  </el-row>

</template>
<script>
import draggable from "vuedraggable";
import WidgetFormItem from "./WidgetFormItem";
export default {
  props: {
    node: {
      required: true,
      type: Object,
    },
    select: {
      type: Object
    }

  },
  data () {
    return {

      selectWidget: this.select,
    };
  },
  watch: {
    select (val) {
      this.selectWidget = val;
    },
    selectWidget: {
      handler (val) {
        console.log("select formrow watch ..." + val);
        this.$emit("update:select", val);
      },
      deep: true,
    },
  },
  components: {
    draggable,
    WidgetFormItem,
  },
  name: "form-row-draggable"

  , methods: {


    handleSelectWidget: function () {

      this.selectWidget = this.node;

      console.log("selected :" + this.selectWidget);
    }

    ,

    handleWidgetColAdd: function ($event, row, colIndex) {
      console.log('coladd', $event)
      console.log("this row:", row)
      console.log("this index", colIndex)
      // const newIndex = $event.newIndex
      // const oldIndex = $event.oldIndex
      const item = $event.item


      console.log('from', item)


      const key = Date.parse(new Date()) + '_' + Math.ceil(Math.random() * 99999)

      //vue3 已经大量的改善了这个给值
      row.list[colIndex].key = key
      row.list[colIndex].id = key


      // this.$set(row.columns[colIndex].list, newIndex, {
      //   ...row.columns[colIndex].list[newIndex],
      //   options: {
      //     ...row.columns[colIndex].list[newIndex].options,
      //     remoteFunc: 'func_' + key
      //   },
      //   key,
      //   // 绑定键值
      //   model: row.columns[colIndex].list[newIndex].type + '_' + key,
      //   rules: []
      // })

    }
  },

};
</script>
<style scoped>
.dragArea {
  min-height: 50px;
  outline: 1px dashed;
}
</style>